<!--
!query 参数:
  query 参数类似于 URL 中的查询字符串，用于通过键值对的形式传递参数。
特点:
  1、显示在地址栏中：以 ?key=value 的形式附加在 URL 后面。
  2、不需要动态路径匹配：可以直接使用。
  3、常用于搜索、过滤等场景。
示例：
  父：<RouterLink :to="{ path: '/StuDemo56/StuDemo56Son01',query:{id:1,title:'新闻标题',content:'新闻内容'}}">第一个子组件:query传参</RouterLink>
  子：
    <p>{{ $route.query.id }}</p>
    <p>{{ $route.query.title }}</p>
    <p>{{ $route.query.content }}</p>
!params 参数
  1、params 参数是通过动态路径传递数据的一种方式。
特点：
  1、依赖路由配置中的动态路径：必须在 path 中定义动态参数（/:paramName）。
  2、不显示在查询字符串中：参数直接嵌入 URL 路径。
  3、用于数据量较小的场景。
示例：
  父：<RouterLink :to="{ name: 'StuDemo56Son02', params:{id:2,title:'新闻标题', content:'新闻内容'}}">第二个子组件:params传参</RouterLink>
  子：
    <p>{{ $route.params.id }}</p>
    <p>{{ $route.params.title }}</p>
    <p>{{ $route.params.content }}</p>
  路由：
    {
      path: '/StuDemo56',
      name: 'dayStuDemo56',
      component: () => import('@/views/day20250103/StuDemo56.vue'),
      children:[
       {
        path: '/StuDemo56/StuDemo56Son01',
        name: 'StuDemo56Son01',
        component: () => import('@/views/day20250103/components/StuDemo56Son01.vue'),
       },
       {
        path: '/StuDemo56/:id/:title/:content',
        name: 'StuDemo56Son02',
        component: () => import('@/views/day20250103/components/StuDemo56Son02.vue'),
       }
      ]
    },
-->
<template>
  <div id="wrap">
    <h1>路由基础知识点总结</h1>
    <!-- 使用字符串查询  http://localhost:5173/StuDemo56?id=100&name=%E5%B0%8F%E6%98%8E -->
    <p>查询字符串：{{ $route.query.id }}</p>
    <p>查询字符串：{{ $route.query.name }}</p>

    <!-- 传参操作：query parmas -->
    <RouterLink :to="{ path: '/StuDemo56/StuDemo56Son01',query:{id:1,title:'新闻标题',content:'新闻内容'}}">第一个子组件:query传参</RouterLink>
    <RouterLink :to="{ name:'StuDemo56Son01'}">第一个子组件:query传参</RouterLink>
    <RouterLink :to="{ name: 'StuDemo56Son02', params:{id:2,title:'新闻标题', content:'新闻内容'}}">第二个子组件:params传参</RouterLink>
    <br>

    <!-- 编程式导航 -->
    <button @click="Lpush">跳转第三个子组件</button>
    <button @click="Rpush">跳转第四个子组件</button>
    <!-- 默认视图 -->
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo56',
};
</script>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
//useRoute:路由上下文，能够获取路由参数；useRouter路由对象：调用对象的方法
const route = useRoute(); //路由上下文，能够获取路由参数
const router = useRouter(); //调用对象的方法

console.log(router);
console.log(route.query); //query 查询字符串  查询地址栏字符串
console.log(route.params); //路由传参

//编程式导航
const islogin = ref(true)
const Lpush = () => {
  if(islogin.value){
    router.push({
      path:'/StuDemo56/StuDemo56Son03',
      query:{id:1,title:'新闻标题',content:'新闻内容'}
    })
  }
}
const Rpush = () => {
  if(islogin.value){
    router.push({
      name: 'StuDemo56Son02',
      params:{id:1,title:'新闻标题',content:'新闻内容'}
    })
  }
}
</script>

<style lang="scss"></style>
